<template>
  <div id="app">
    <!-- 顶部通栏 -->
    <header class="mui-bar mui-bar-nav" ref="topBar">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left go" v-show="go">返回</a>
      <h1 class="mui-title">===</h1>
    </header>

    <!-- 内容 二级路由 -->
    <transition>
      <router-view :height="height" :ballE="$refs['cubeic-mall']"></router-view>
    </transition>

    <!-- 底部通栏 -->
    <div class="bottom" ref="bottomBar">
      <cube-tab-bar
        v-model="selectedLabelSlots"
        :inline="false"
        >
        <cube-tab v-for="item in tabs" :label="item.label" :key="item.label">
          <router-link :to="item.value">
            <!-- name为icon的插槽 -->
            <i :class="item.icon" :ref="item.icon"></i>
            <!-- 默认插槽 -->
            <p>{{item.label}}</p>
          </router-link>
        </cube-tab>
      </cube-tab-bar>
      <span class="mui-badge mui-badge-danger" v-text="$store.getters.cartAll"></span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectedLabelSlots: '首页',
      tabs: [{
        label: '首页',
        icon: 'cubeic-home',
        value: '/index'
      }, {
        label: '会员',
        icon: 'cubeic-person',
        value: '/vip'
      }, {
        label: '购物车',
        icon: 'cubeic-mall',
        value: '/cart'
      }, {
        label: '搜索',
        icon: 'cubeic-search',
        value: '/search'
      }],
      height: null,
      go: true
    }
  },
  watch: {
    // 监听路由变化
    $route (newV, v) {
      this.isGo()
    }
  },
  methods: {
    // 路由后退按钮显示判断
    isGo () {
      if (this.$route.path !== '/index') {
        this.go = true
      } else {
        this.go = false
      }
    }
  },
  mounted () {
    // 计算出路由容器的盖度
    this.height = window.innerHeight - this.$refs.topBar.offsetHeight - this.$refs.bottomBar.offsetHeight
  },
  created () {
  }
}
</script>

<style lang="stylus" scoped>
  #app
    overflow-x hidden
    padding-top 44px
    padding-bottom 51.6px
    // 顶部通栏
    .mui-bar-nav
      box-shadow none
    .mui-bar
      background-color #0095ff
      .mui-title
        color #fff
      .go
        color #fff
        font-size 16px
        margin-top 5px
    // 底部通栏
    .bottom
      position  fixed
      bottom 0
      width 100%
      font-size 13px
      z-index 1000
      background-color #fff
      border-top 1px solid #ccc
      // 字体
      >>> [class^="cubeic-"], >>> [class*=" cubeic-"]
        font-size 25px
      // 购物车角标
      .mui-badge
        position absolute
        right 31%
        top 1px
    // 页面切换过渡
    .v-enter
      transform translateX(100%)
    .v-leave-to
      transform translateX(-100%)
    .v-enter-active, .v-leave-active
      transition all 0.3s ease
      position fixed
      width 100%
</style>

<style lang="stylus">
body
  background-color #fff
  [v-cloak]
    display none
  a
    color #7e8c8d
*
  touch-action pan-y
</style>
